package myJs.components

import cats.effect.SyncIO
import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.StateSnapshot
import japgolly.scalajs.react.vdom.all._
import monocle.Lens
import monocle.macros.Lenses
import myJs.Implicits._
import myJs.tool.Tool
import myJs.tool.Tool._
import japgolly.scalajs.react.ReactMonocle._

import scala.collection.immutable.SeqMap

/** Created by yz on 3/11/2020
  */
object FontFamilyComponent {

  @Lenses
  case class State(fontFamily: String)

  object State {
    def init = {
      State(fontFamily = "Times")
    }
  }

  class Backend(bs: BackendScope[Unit, State]) {

    def didMount = {
      SyncIO {
        Tool.popover
        ()
      }
    }

    def render(s: State) = {

      implicit class MyLens[T](lens: Lens[State, T]) {

        def zoomL(implicit r: Reusability[T]) = {
          StateSnapshot.withReuse.zoomL(lens).prepareVia(bs).apply(s)
        }
      }

      val fontFamilyMap = SeqMap(
        "Times" -> "Times New Roman（serif）",
        "ArialMT" -> "Arial（sans）",
        "mono" -> "Courier（mono）",
        "SimSun" -> "宋体（SimSun）"
      )
      div(
        `class` := "form-group",
        label(`class` := "control-label col-sm-4", messages("font"), ":"),
        div(
          `class` := "col-sm-8",
          PureSelectComponent.Props(State.fontFamily.zoomL, name = "fontFamily", optionMap = fontFamilyMap).render
        )
      )
    }

  }

  val Component = ScalaComponent
    .builder[Unit]
    .initialState(State.init)
    .renderBackend[Backend]
    .componentDidMount(x => x.backend.didMount)
    .build

}
